<template>
  <div id="app">
    <el-card shadow="always">
      <el-form :inline="true">
        <!--分页查询-->
        <el-form-item >
          <el-input v-model="specificationSearch.specName" placeholder="规格名称"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button type="primary" icon="el-icon-search"  plain @click="search">查询</el-button>
        </el-form-item>
        <el-form-item >
          <el-button type="success" icon="el-icon-plus" plain @click="add">添加</el-button>
        </el-form-item>
        <el-form-item >
          <el-button type="danger" icon="el-icon-remove" plain @click="handleDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
<!--      页面上面导航栏-->
      <el-table
          :data="specificationList"
          style="width: 100%"
          @selection-change = "handleSelectionChange">
        <el-table-column
          type="selection">
        </el-table-column>
        <el-table-column
            label="规格id"
            align="center"
            prop="id">
        </el-table-column>
        <el-table-column
            label="规格名称"
            align="center"
            prop="specName">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      分页导航栏-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--添加-->
    <el-dialog :title="编辑规格" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
<!--      {{addObj}}-->
      <el-form v-model="addObj" :rules="rules" ref="ruleForm">
        <el-form-item label="规格id：" prop="id">
          <el-input v-model="addObj.id" placeholder="请输入规格id"></el-input>
        </el-form-item>
        <el-form-item label="规格名称：" prop="specName">
          <el-input v-model="addObj.specName" placeholder="请输入规格名称"></el-input>
        </el-form-item>
        <el-form-item label="选项名称：" prop="optionName">
          <el-input v-model="addObj.addOption.optionName" placeholder="请输入选项名称"></el-input>
        </el-form-item>
        <el-form-item label="订单数量" prop="orders">
          <el-input v-model="addObj.addOption.orders"  type="number" placeholder="请输入订单数量"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSpecification">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import specificationApi from '@/api/specification'
import Specification from "@/api/specification";
import specification from "@/api/specification";

export default {
  computed: {
    specification() {
      return specification
    },
    Specification() {
      return Specification
    }
  },
  data() {
    return {
      page: 1,        // 当前面
      pageSize: 5,    // 每页显示条数
      total: 100,     // 总数
      specificationList:[],
      specificationSearch:{}, //查询条件对象
      dialogFormVisible:false,    //对话框的显示状态
      title:'添加规格',        //对话框标题
      multipleSelection:[],  //选中删除的集合
      ids: [],
      updateObj:{},
      addObj:{
        addOption:{}
      },    //添加的对象
      rules: {
        id: [
          {required: true, message: '请输入规格id', trigger: 'blur'},
        ],
        specName: [
          {required: true, message: '请输入规格名称', trigger: 'blur'},
        ],
        optionName: [
          {required: true, message: '请输入选项名称', trigger: 'blur'}
        ],
        orders: [
          {required: true, message: '请输入订单数量', trigger: 'blur'},
        ],
      }
    }
  },
  created() {
    // this.findSpecification()
    // this.findByPage();
    this.search();
  },
  methods: {
    //查询所以
    async findSpecification() {
      const {data: res} = await specificationApi.findAllSpecification()
      console.log(res.data)
      if (res.code === 200) {
        this.specificationList = res.data.list
      }
    },
    //分页查询
    async findByPage() {
      const {data: res} = await specificationApi.findByPage(this.page, this.pageSize)
      console.log(res)
      if (res.code === 200) {
        this.specificationList = res.data.pr.rows
        this.total = res.data.pr.total
      }
    },
    //条件查询+分页
    async search() {
      const {data: res} = await specificationApi.search(this.page, this.pageSize, this.specificationSearch)
      console.log(res)
      if (res.code === 200) {
        this.specificationList = res.data.pr.rows
        this.total = res.data.pr.total
      }
    },
    // 添加
    add() {
      this.title = "添加规格"
      this.student = {}
      this.dialogFormVisible = true
    },
    //保存
    async saveSpecificaton() {
      this.$refs.ruleForm.validate(async valid => {
        let url = "/specification/add"
        let method = "post"
        //修改
        if (this.specification.id) {
          url = "/specification/update"
          method = "put"
        }
        if (valid) {
          const {data: res} = await specificationApi.save(url, method, this.specification)
          console.log("res:", res)
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: res.message,
              onClose: () => {
                this.dialogFormVisible = false
                this.search()
              }
            })
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        } else {
          console.log("验证失败！")
          return false
        }
      })
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.search()
      // this.findByPage();
      console.log(`每页 ${val} 条`);
    },
    //page改变时
    handleCurrentChange(val) {
      this.page = val
      this.search()
      // this.findByPage();
      console.log(`当前页: ${val}`);
    },

    //编辑
    handleEdit(index, row) {
      console.log(index, row);
    },
    //删除
    handleDelete(index, row) {
      if (row) {
        this.ids.push(row.id);  // 如果只选中了一行，推入该行的 id
      } else {
        this.ids = this.multipleSelection.map(m => m.id);  // 如果选择了多行，获取所有选中行的 id
      }

      // 显示删除确认框
      this.$confirm('是否真的要删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        specificationApi.delete(this.ids)
            .then(res => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: res.message,
                  onClose: () => {
                    this.search();
                  }
                });
              } else {
                this.$message({
                  type: 'error',
                  message: res.message
                });
              }
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: '删除失败，请稍后再试！'
              });
            });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除操作已取消'
        });
      });

      console.log(index, row);
    }
  }
}

</script>

<style>

#app{
  display: flex;
  justify-content: center;
}
.el-card{
  width: 90%;
}
.el-pagination{
  margin-top: 20px;
  text-align: right;
}
</style>
